<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>지도검색</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; font-size:8pt; }
#map { width: 100%; height: 100%;}
#tooltip
{
	position:absolute;
	text-align: center;
    width:290px;
    height:30px;
    padding:10px;
    background-color: #ffffff;
    border: 1px dotted red;
    font-size:1.3em;
    top:200px;
    left:400px;
    font-family:"Nanum Gothic";
    z-index: 2;
}

</style>
<script type="text/javascript">
  WebFontConfig = {
    custom: {
        families: ['Nanum Gothic'],
        urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=fc85a644ffe658b376fd7cd37bf89ca564b975b5"></script>
<script type="text/javascript">
	window.onload = function() {
		
		$("#map").hover(function(){
				$("#tooltip").hide();
			},function(){
				$("#tooltip").show();
		});
		
		if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(function(position){
				
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;
				loadMap(latitude, longitude);
				
			}, function() {
				alert('위치정보를 사용하지 않기때문에 현재위치를 표시할 수 없습니다.');
				loadMap(37.56610781616669, 126.97813462137738);
			});
			//위치 변동사항을 추적하려면 watchPosition()을 사용한다. 이것은 사용자의 위치변동이 감지될 때 마다 인자로 받은 콜백을 호출한다.
			navigator.geolocation.watchPosition(function(pos) {
			});
		}
		else
		{
			alert('위치정보를 사용할 수 없기 때문에 현재위치를 표시할 수 없습니다.');
			loadMap(37.56610781616669, 126.97813462137738);
		}
		
		//맵 로드
		function loadMap(latitude, longitude){
			var infowindow = new daum.maps.InfoWindow({
				content: '<p style="margin:7px 22px 7px 12px;font:14px/1.5 Nanum Gothic"><strong>마커를 클릭해 장소를 선택합니다</strong></p>'
			});
			var map = new daum.maps.Map(document.getElementById('map'), {
				center: new daum.maps.LatLng(latitude, longitude),
				level: 3
			});
			
			var zoomControl = new daum.maps.ZoomControl(); 
			map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
			var mapTypeControl = new daum.maps.MapTypeControl(); 
			map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
			
			var maker = new daum.maps.Marker({
				setDraggable:true
			});
			//infowindow.open(map, maker);
			
			daum.maps.event.addListener(map, "click", function(MouseEvent){ 
				var latLng = MouseEvent.latLng; 
				latitude = latLng.getLat(); 
				longitude = latLng.getLng();
				
				maker.setMap(null);
				maker.setPosition(latLng);
				maker.setMap(map);
				
			});
			
			daum.maps.event.addListener(maker, "mouseover", function(){
				infowindow.open(map, maker);
			});
			daum.maps.event.addListener(maker, "click", function(){
				if(confirm('지정한 위치로 장소를 선택하시겠습니까?')){
					
					$.ajax({
						type : "Get",
						url : "/calendar/getMapAddress.do",
						dataType : "text",
						data: "&longitude=" + longitude + "&latitude=" + latitude,
						success : function(json) {
							window.opener.getPlace(json, latitude, longitude);
							self.close();
						},
						error : function(e) {
							alert("처리중 장애가 발생하였습니다.");
						}
					});
				}//end if
			});
		}// 맵 로드 끝
	};
</script>
</head>
<body>
<div id="map">
</div>
<div id="tooltip">지도에서 원하시는 장소를 클릭하세요</div>
</body>
</html>